<template>
    <div class="detail">
        <van-sticky>
        <div class="top">
            <div>
                <router-link to="/"><van-icon name="wap-home-o" /></router-link>
            </div>
            <div class="title">网易严选</div>
            <div>
                <router-link to="/search"><van-icon name="search" /></router-link>
                <router-link to="/shopcart"><van-icon style="margin-left: 5px;" name="shopping-cart-o" /></router-link>
            </div>
        </div>
        </van-sticky>
        <van-swipe :autoplay="2000" lazy-render indicator-color="red">
            <van-swipe-item v-for="image in images" :key="image.id">
                <img style="width: 100%;"  :src="image.imgUrl" />
            </van-swipe-item>
        </van-swipe>
        <div class="price">
            <p class="title">新人特价 | 距离结束2天</p>
            <p class="money">￥<span>{{ goodsPrice }}</span></p>
        </div>
        <div class="van-ellipsis" >{{ skuName }}</div>
        <div class="simpleBrandInfo">
            <div class=" preLogo1"></div>
            <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" alt="">
            <span class="title">网易严选</span>
        </div>
        <div class="desc">推荐理由</div>
        <div class="rcmdBanner">
            <div class="angleTop">
                <span class="angleContent"></span>
            </div>
            <ul>
                <li>
                    <div class="key">1</div>
                    <span>100%优质PC,材质成年人站上去也不会压坏</span>
                </li>
                <li>
                    <div class="key">2</div>
                    <span>100%优质PC,材质成年人站上去也不会压坏</span>
                </li>
                <li>
                    <div class="key">3</div>
                    <span>100%优质PC,材质成年人站上去也不会压坏</span>
                </li>
                <li>
                    <div class="key">4</div>
                    <span>100%优质PC,材质成年人站上去也不会压坏</span>
                </li>
            </ul>
        </div>
        <div class="kong"></div>
            <div class="choose" >邮费:满99包邮<span>></span></div>
            <div class="choose" >购物返:最高返59积分<span>></span></div>
            <div class="kong"></div>
            <div class="choose" @click="showPopup">请选择规格数量<span>></span></div>
            <div class="choose" >限制:该商品不可使用优惠券<span>></span></div>
            <div class="choose" @click="showAreaPopup">配送：{{ address }}<span>></span></div>
            <div class="choose" >服务:严选自营 7天无忧退换 <span>></span></div>
            <div class="kong"></div>
            <div class="dt-section">
                     <div class="m-brandInfo">
                            <div class="left">
                                <img src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" class="brand-logo" alt="">
                            </div>
                            <div class="right">
                                <div class="title"> 网易严选</div>
                                <div class="descc">以美好生活触手可及为初心，网易严选逐步发展成为中国新中产喜爱的生活方式</div>
                            </div>
                        </div>
            </div>
            <div class="kong"></div>
        <div class="tab-content">
            <div id="one" class="tab-pane active">
              <ul class="goods-intro">
                <li>分辨率：1920*1080(FHD)</li>
                <li>后置摄像头：1200万像素</li>
                <li>前置摄像头：500万像素</li>
                <li>核 数：其他</li>
                <li>频 率：以官网信息为准</li>
                <li>品牌： Apple</li>
                <li>商品名称：APPLEiPhone 6s Plus</li>
                <li>商品编号：1861098</li>
                <li>商品毛重：0.51kg</li>
                <li>商品产地：中国大陆</li>
                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                <li>系统：苹果（IOS）</li>
                <li>像素：1000-1600万</li>
                <li>机身内存：64GB</li>
              </ul>
            </div>
        </div>
        <van-sticky :offset-bottom="0" position="bottom">
            <div class="footer">
                <van-icon name="service-o" />
                <p class="buy" @click="showPopup">立即购买</p>
                <p class="card" @click="addCard"> 加入购物车</p>
            </div>
        </van-sticky>
        <van-swipe>
            <img style="width: 100%;"  src="https://yanxuan.nosdn.127.net/static-union/1682588…pg?quality=75&type=webp&imageView&thumbnail=750x0" />
        </van-swipe>

        <van-popup v-model:show="show" :overlay=false closeable :close-on-click-overlay=false position="bottom" :style="{ height: '50%' }">
            <van-card :num="buyNumber" :price="goodsPrice" :desc="skuDesc" :title="skuName" :thumb="defaultImg" />
            <div class="chooseArea">
                <dl v-for="s1 in saleAttrList" :key="s1.id">
                    <dt>{{ s1.saleAttrName }}</dt>
                    <dd @click="changeAttrs(s1.spuSaleAttrValueList, s2.id)" v-for="s2 in s1.spuSaleAttrValueList"
                        :key="s2.id" :class="s2.isChecked === '1' ? 'active' : null">
                        {{ s2.saleAttrValueName }}</dd>
                </dl>
                <dl>
                    <dt>数量</dt>
                    <van-stepper v-model="buyNumber" />
                </dl>
            </div>
        </van-popup>
        <van-popup class="z-index:3001" v-model:show="showAddress" position="bottom" :style="{ height: '50%' }">
            <van-area title="标题" :area-list="area"  @confirm="confirm" />
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Detail',
})
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { reqCardDetail, reqAddCard, type SkuImageListData, type SpuSaleAttrListData, SpuSaleAttrValueListData } from '@/api/category'
import { areaList } from '@vant/area-data';
const area = areaList
const images = ref<SkuImageListData>([]) //轮播图
const goodsPrice = ref()// 商品价格
const defaultImg = ref() // popup弹框默认图片
const skuDesc = ref() // 商品描述
const skuName = ref() // 商品名称
const saleAttrList = ref<SpuSaleAttrListData[]>([])
const isChoose = ref() // 商品的是否选中
const buyNumber = ref(1); //购买数量
const goodsId = ref() // 销售属性列表
const address = ref('')
// 获取轮播图、价格数据
async function getCardDetail() {
    // 手机id数组
    const arr = [20, 13, 12, 11, 1, 17]
    // 随机获取数组中的一个元素
    const randomIndex = Math.floor(Math.random() * arr.length);
    const randomElement = arr[randomIndex];
    const { skuInfo, spuSaleAttrList } = await reqCardDetail(randomElement)
    // 轮播图
    images.value = skuInfo.skuImageList
    // 商品价格
    goodsPrice.value = skuInfo.price
    // popup弹框默认图片
    defaultImg.value = skuInfo.skuDefaultImg
    // 商品描述
    skuDesc.value = skuInfo.skuDesc
    // 商品名称
    skuName.value = skuInfo.skuName
    // 商品的是否选中
    isChoose.value = skuInfo.isSale
    // 销售属性列表
    saleAttrList.value = spuSaleAttrList
    goodsId.value = skuInfo.id
    console.log(skuInfo);
    console.log(spuSaleAttrList);

}

//点击选择规格数量、立即购买、加入购物车 弹出popup
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
// 切换选中状态
function changeAttrs(list: SpuSaleAttrValueListData[], id: number) {
    list.forEach(item => {
        item.id === id ? item.isChecked = '1' : item.isChecked = '0'
    });
}

// 点击获取地址弹出地址选择框
const showAddress = ref(false);
const showAreaPopup = () => {
    showAddress.value = true;
};
// 加入购物车
async function addCard() {
    if (show.value) {
        await reqAddCard(goodsId.value, buyNumber.value)
    } else {
        show.value = true
    }

}
function confirm(selectedValues: { selectedOptions: any[]; }) {
    selectedValues.selectedOptions.map(item => {
        address.value += item.text
        return address.value
    })


}

// 选择地址
onMounted(() => {
    getCardDetail()
})
</script>

<style scoped lang="scss">
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: #666;
    }

  .detail {

    .top {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 0 12px 0 8px;
        height: 44px;
        line-height: 44px;
        background-color: white;

        .title {
            font-weight: bolder;
            font-size: 20px;
        }
    }

    .my-swipe .van-swipe-item {
        font-size: 20px;
        line-height: 150px;
        text-align: center;
    }
 
    .goods-intro li{
        list-style: none;
        font-size: 10px;
    }
    .price {
        background-color: rgb(250, 30, 50);
        color: white;
        padding: 10px;

        .title {
            font-size: 14px;
            padding-bottom: 5px;
        }

        .money {
            font-weight: bolder;

            span {
                font-size: 30px
            }
        }
    }


    .van-ellipsis {
        font-size: 20px;
        margin: 10px;
        font-weight: bold;
    }
    .simpleBrandInfo .preLogo1 {
    width: 0.64rem;
    height: 0.32rem;
    margin-right: 0.08rem;
    background: url(//yanxuan.nosdn.127.net/6366944….png) no-repeat;
    background-size: 100% 100%;
  }
    .simpleBrandInfo .brandLogo{
    width: 15px;
    height: 15px;
    margin-right: 0.08rem;
   }
   .simpleBrandInfo .title {
    // margin: 0.12rem 12px 0;
    font-size: .24rem;
    line-height: .36rem;
    color: #7f7f7f;
    margin-right: 0.16rem;
  }
  .desc {
    margin: 0.12rem 12px 0;
    font-size: .24rem;
    line-height: .36rem;
    color: #333;
    font-weight: lighter;
}
 .rcmdBanner {
    margin: 0.12rem 12px 0;
    padding: 0.14rem 0.2rem;
    width: 8.9rem;
    height: 2rem;
    border-radius: 4px;
    line-height: .6rem;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 0.04rem;
    position: relative;
 }
 div {
    display: block;
}
 .rcmdBanner .angleTop {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.09rem solid transparent;
    border-right: 0.09rem solid transparent;
    top: -0.09rem;
    left: 0.39rem;
    border-bottom: 0.09rem solid #e6e6e6;
    z-index: 1;
}
.rcmdBanner .angleContent {
    top: 0.01rem;
    left: -0.09rem;
    border-bottom: 0.09rem solid #fafafa;
    z-index: 2;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.09rem solid transparent;
    border-right: 0.09rem solid transparent;
}
ul {
    // display: block;
    list-style-type: disc;
    margin-block-end: 1em;
    margin-left: 10px;
    line-height: .8rem;
}
// .rcmdBanner li:not(:last-child) {
//     margin-bottom: -1.0rem;
// }
.rcmdBanner li {
    list-style: none;
    height: 0.50rem;
    line-height: .50rem;
    font-size: .24rem;
    color: #333;
}
.rcmdBanner .key {
    display: inline-block;
    width: 0.24rem;
    height: 0.24rem;
    border: 1px solid #dd1a21;
    border-radius: 50%;
    text-align: center;
    line-height: .24rem;
    font-size: .2rem;
    color: #dd1a21;
    // font-family: PingFang SC;    
    font-weight: 700;
    margin-right: 0.08rem;
    vertical-align: middle;
}
.rcmdBanner li .recommendReason {
    display: inline-block;
    height: 0.36rem;
    line-height: .36rem;
    vertical-align: middle;
}
.kong{
    height: 10px;
    background-color: #eeeeee;
}
    .choose {
        border-bottom: 1px solid #ccc;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
.dt-section {
    background: #fff;
    border-bottom: 0.2rem solid #eee;
}
.m-brandInfo {
    font-size: 15px;
    margin: 20px 20px;
    position: relative;
    background: #fff;
    color: #000;
    padding-bottom: 0.3rem;
    overflow: hidden;
    display: flex;
}
.m-brandInfo  .title{
 font-size: 18px;
 margin-top: 10px;
 margin-bottom: 10px;
 font-weight: bold;
}
.m-brandInfo .descc{
    font-size: 12px;
}
.m-brandInfo .left img{
    width:50px;
    height:50px;
    margin-top: 20px;
    margin-right: 20px;
}

    .footer {
        width: 100%;
        height: 52px;
        position: fixed;
        bottom: 0;
        font-size: 16 px;
        text-align: center;
        display: flex;
        border: 1px solid #ccc;
        background-color: white;
        z-index: 3000;

        :deep(.van-badge__wrapper) {
            line-height: 52px;
            width: 20%;
            border-right: 1px solid #ccc;
        }

        p {
            width: 40%;
            line-height: 52px;

            &.card {
                background-color:#dd1a21;
                color: white;
            }
        }
    }

    .chooseArea {
        overflow: hidden;
        line-height: 28px;
        margin-top: 10px;
        font-size: medium;

        dl {
            overflow: hidden;
            margin: 13px 0;

            dt {
                margin-right: 15px;
                float: left;
            }

            dd {
                float: left;
                margin-right: 5px;
                color: #666;
                line-height: 24px;
                padding: 2px 14px;
                border-top: 1px solid #eee;
                border-right: 1px solid #bbb;
                border-bottom: 1px solid #bbb;
                border-left: 1px solid #eee;
                cursor: pointer;

                &.active {
                    color: green;
                    border: 1px solid green;
                }
            }
        }
    }
  }


:deep(.van-card__header) {
    background-color: white;
}

:deep(.van-popup--bottom) {
    padding: 20px;
    position: fixed;
    bottom: 53px;
}

:deep(.van-tag--default) {
    padding: 5px;
    margin-right: 10px;
}
.detail .footer P{
    font-size:15px;

}



</style>